<template>
	<view>
		<view @touchmove.stop.prevent="" v-if="isShow" class="mask"></view>
		<view @touchmove.stop.prevent="" :class="isShow?'':'hide'" class="tip">
			<view @touchmove.stop.prevent="" style="line-height: 80rpx; position: relative;" class="text-center">


				<scroll-view class="text-left" @touchmove.stop.prevent="" style=" width: 750rpx; position: absolute; top: 0; height: 80vh;"
				 :show-scrollbar="true" :scroll-y="true" scroll-top="10">
					<view :style="{height:`${getHeight()}rpx`}" style=" width: 750rpx;"> </view>
					<view @tap=checkOne(index,item) v-for="(item,index) in list" :key="index" class="w8 flex" style="height: 80rpx; line-height: 80rpx;">
						{{item.label}}
						<view class="flex1"></view>
						<icon class=" checked icon-dui iconfont"></icon>
					</view>
				</scroll-view>

				<view @touchmove.stop.prevent="" style=" background-color: #FFFFFF; position: relative;">
					<text>{{title}}</text>
					<view class="flex w10">
						<view class="flex1">
							<view style="height: 20rpx; width: 1rpx;"></view>
							<view @tap="toPlies(item,index)" v-for="(item,index) in titleList">
								<view class="flex text-left">
									<view style=" border-radius: 50%; margin: 0 30rpx; width: 30rpx; height: 30rpx; background-color: #02C9FC;"></view>
									<text style="line-height: 30rpx;">{{item.label}}</text>
								</view>
								<view v-if="index < titleList.length-1" style="width: 1px; margin-left: 42rpx; height: 70rpx; background-color: #03C8FC;">
								</view>
							</view>
							<view style="height: 20rpx; width: 1rpx;"></view>
						</view>
					</view>
					<cross-line style="width: 750rpx;"></cross-line>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import crossLine from "@/components/ui/tg-cross-line.vue"
	export default {
		components: {
			crossLine,
		},
		data() {
			return {
				isShow_: null,
				plies: 0,
				checked: [],
				titleList: [],
				list_: null,
				flag: 2
			}
		},
		props: {
			data: {
				default: () => {
					return []
				}
			},
			title: {
				default: '测试样例'
			},
			show: {
				default: true
			}
		},
		computed: {
			list: {
				get() {
					if (this.flag > 0) {
						this.flag-- 
						this.list_ = this.data
						console.log(this.data)
					}
					return this.list_;
				},
				set(newValue) {
					this.list_ = newValue
				}
			},
			isShow: {
				get() {

					this.isShow_ = this.show

					return this.isShow_;
				},
				set(newValue) {
					this.isShow_ = newValue

				}
			},
			isCheck: {
				get() {
					return this.checked[this.plies]
				}
			}
		},
		methods: {
			getHeight() {
				if (this.checked.length == 0) {
					return 150
				} else {
					return this.checked.length * 100 + 70
				}
			},
			toPlies(item, index) {
				this.plies = index
				if (index != 0) {
					this.list = this.titleList[index - 1].children
				} else {
					this.list = this.data
				}
				this.checked= this.checked.slice(0,index+1)
				this.titleList= this.titleList.slice(0,index+1)
				console.log(this.list)
			},
			checkOne(index, item) {
				this.checked[this.plies] = index;
				this.titleList[this.plies] = item;
				if (item.children != null) {
					//层数+1
					this.plies++;
					this.list = item.children
				} else {
					this.changeState()
					console.log(this.checked)
					console.log(this.titleList)
				}
			},
			changeState() {
				// this.isShow = false
				
				var result = {
					checked: this.titleList,
					checkedIndex: this.checked
				}
				this.$emit("changeState", result)
			}
		}
	}
</script>
<style scoped>
	.check {
		font-size: 60rpx !important;
	}

	.checked {
		color: #03C8FC;
		font-size: 0;
	}

	.hide {
		transform: scale(1, 0);

	}

	.mask {
		top: 0;
		position: fixed;
		width: 100vw;
		height: 100vh;
		z-index: 150;
		background: rgb(0, 0, 0, 0.4);
	}

	.tip {
		transition: transform 0.4s;
		transform-origin: 50% 100%;
		bottom: 0;
		position: fixed;
		width: 100vw;
		height: 80vh;
		z-index: 150;
		background: rgb(255, 255, 255);
		border-radius: 15rpx 15rpx 0 0;
	}
</style>
